<template>
<div class="ground">
  <div class="background">
    <div class="login">
      <div class="input">
        <div class="registername">
          <el-input v-model="registerData.username" placeholder="用户名" />
        </div>
        <div class="registermail">
          <el-input v-model="registerData.mail" placeholder="邮 箱" /> 
        </div>
        <div class="registerpassword">
          <el-input
            v-model="registerData.psw"
            type="password"
            placeholder="密 码"
            show-password
          />
        </div>    
      </div>
      <div class="button">
          <el-button type="primary" @click="register">注册</el-button>
          <el-button @click="back">返回</el-button>
      </div> 
    </div>
  </div>
</div>
</template>

<script>  
import request from "../utils/request";
export default {

  data() {
      return {
        registerData:{
          username:"",
          mail:"",
          psw:""
          }, 
      }
    },

  
    created(){
       
    },

    methods: {
    register(){
      if(!this.registerData.username){
        window.alert("请输入用户名！")
      }else if(!this.registerData.mail){
        window.alert("请输入注册邮箱！")
      }else if(!this.registerData.psw){
        window.alert('请设置密码！')
      }else{
        request.post("/register", this.registerData).then((res) => {
                if (res.data.code === 200) {
                    window.alert(res.data.message);
                    this.$router.push('/login')
                    console.log('注册成功')
                } else {
                  window.alert(res.data.message);
                }
            });
      }    
     },

     back(){
       this.$router.push('/login')
     }

  },
}
</script>

<style scoped>
.ground{
   height: 100vh;
   width:100%;
   display: grid;
   place-items: center;
   background-image: linear-gradient(#307496,#245580);
}

.background{
height:600px;
width:70%;
background-image:url('/img/313572.jpg');
background-size: 100% 100%;
display: grid;
place-items: center;
border-radius: 40px;
box-shadow: 20px 20px 10px #110000;
}

.login{
  height:350px;
  width:500px;
  background-color: #2c3e50;
  /* opacity:0.95; */
  display: grid;
  place-items: center;
  border: 2px solid #2c3e50;
  border-radius: 30px;
  box-shadow: 20px 20px 10px #110000;
}

.input{
height:160px;
width:350px;
margin:0 auto;

}

 .registername,.registerpassword,.registermail{
   margin:20px
 }

</style>